<template>
    <!-- 订单转化 -->
  <div class="orderConversions ">
    <div class="head">
        <el-row>
    <el-col :span="15">
        <p style="margin-bottom:100px">订单转化</p>
    </el-col>
      <el-col :span="9" >
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" :stretch	="true">
         <el-tab-pane label="本日" name="first">
         </el-tab-pane>
         <el-tab-pane label="本周" name="second"></el-tab-pane>
         <el-tab-pane label="本月" name="third"></el-tab-pane>
      </el-tabs>
      </el-col>
</el-row>

    </div>
<div class="content" style="position: relative;top:50%;">
    <Echarts :echartsData="echartsData" :isAxisChart="false" :idName="'orderConversions'"></Echarts>
</div>
  </div>
</template>

<script>
import Echarts from '../../components/echarts.vue'
export default {
components:{
    Echarts
},
data(){
    return {
      activeName:'first',
      echartsData:{
        legendHide:true,
        series: [{
        name: '漏斗图',
        type: 'funnel',
        left: '10%',
        top: 10,
        //x2: 80,
        bottom: 0,
        width: '90%',
        height: "90%",
        min: 0,
        max: 100,
        minSize: '20%', //与漏斗形状有关
        maxSize: '70%', //与漏斗形状有关
        sort: 'descending',
        gap: 2,
        
        label: {
            show: true,
            position: 'inside',
            formatter: "{b}{c}---{d}%",
  
        },
        tooltip: {
            show: true, // 在漏斗图中间显示数据
            formatter: '{b}:{c}' // 格式化提示框内容为“分类名：数值”
        },
        labelLine: {
            length: 10,
            lineStyle: {
                width: 1,
                type: 'solid'
            }
        },
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
        },
        // emphasis: {
        //     label: {
        //         fontSize: 20
        //     }
        // },
        data: [{
                value: 60,
                name: '浏览网站',
            },
            {
                value: 40,
                name: '放入购物车'
            },
            {
                value: 80,
                name: '生成订单'
            },
            {
                value: 100,
                name: '支付订单'
            },
            {
                value: 20,
                name: '完成交易'
            },
        ]    }]

      }
//      option :{
 
//     color: [ '#f79f6f','#f25e49','#16dcb7','#4098ff'],
//     tooltip: { //弹窗信息
//         trigger: 'item',
//         formatter: "{b}&nbsp;&nbsp;&nbsp;&nbsp;  {c}&nbsp; {d}%"
//     },

//     // calculable: true,              // 默认关闭可计算特性
//     series: [{
//         name: '漏斗图',
//         type: 'funnel',
//         left: '10%',
//         top: 10,
//         //x2: 80,
//         bottom: 0,
//         width: '90%',
//         height: "90%",
//         min: 0,
//         max: 100,
//         minSize: '20%', //与漏斗形状有关
//         maxSize: '70%', //与漏斗形状有关
//         sort: 'descending',
//         gap: 2,
        
//         label: {
//             show: true,
//             position: 'inside',
//             formatter: "{b}{c}---{d}%",
  
//         },
//         tooltip: {
//             show: true, // 在漏斗图中间显示数据
//             formatter: '{b}:{c}' // 格式化提示框内容为“分类名：数值”
//         },
//         labelLine: {
//             length: 10,
//             lineStyle: {
//                 width: 1,
//                 type: 'solid'
//             }
//         },
//         itemStyle: {
//             borderColor: '#fff',
//             borderWidth: 1
//         },
//         // emphasis: {
//         //     label: {
//         //         fontSize: 20
//         //     }
//         // },
//         data: [{
//                 value: 60,
//                 name: '浏览网站',
//             },
//             {
//                 value: 40,
//                 name: '放入购物车'
//             },
//             {
//                 value: 80,
//                 name: '生成订单'
//             },
//             {
//                 value: 100,
//                 name: '支付订单'
//             },
//             {
//                 value: 20,
//                 name: '完成交易'
//             },
//         ]    }]
// }

    }
},
methods:{
    handleClick(){

    }
}
}
</script>

<style scoped>
::v-deep .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #dfe4ed;
}
</style>